<template>
  <div class="invoiceItems-container">
    <Table
      class="items-table elevation-0"
      :headers="tableHeaders"
      :items="tableItems"
      group-by="lineGroup"
      hide-default-footer
      :rounded="false"
    >
      <template #[`group.header`]="{ toggle, group, isOpen, items }">
        <td @click="toggle" class="pointer pl-0 text-right" colspan="1">
          <v-icon v-if="!isOpen"> mdi-chevron-up </v-icon>
          <v-icon v-else> mdi-chevron-down </v-icon> {{ group }}
        </td>
        <td @click="toggle" class="pointer" colspan="1"></td>
        <td @click="toggle" class="pointer" colspan="2"></td>
        <td @click="toggle" class="pointer text-right" colspan="1">
          {{ arrObjSum(items, "totalAmt") }}
        </td>
        <td @click="toggle" class="pointer" colspan="1"></td>
        <td @click="toggle" class="pointer text-right" colspan="1">
          {{ arrObjSum(items, "invAmt") }}
        </td>
      </template>
    </Table>
    <v-spacer class="footer" no-gutters>
      <v-col>
        <v-row no-gutters>
          <v-spacer></v-spacer>
          <v-col :cols="2" class="text-right text">
            Amount: {{ arrObjSum(tableItems, "invAmt") }}
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-spacer></v-spacer>
          <v-col :cols="12" class="text-right d-flex justify-end">
            <span class="mr-3 text"> Less discount: </span>
            <v-col class="py-0" cols="2">
              <v-text-field
                v-model="discount"
                solo
                dense
                hide-details
                type="number"
                class="gray-input"
              ></v-text-field>
            </v-col>
            <span class="mr-2"> % </span>
            <v-col class="py-0" cols="4">
              <v-text-field
                solo
                dense
                hide-details
                class="gray-input mr-1 text-right"
                :value="arrObjSum(tableItems, 'invAmt')"
              ></v-text-field>
            </v-col>
            <span class="text"> Net Amount: {{ netAmount }} </span>
          </v-col>
        </v-row>
      </v-col>
    </v-spacer>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { isValidKey } from "@/common/constants/Utils";
import Table from "@/components/Maintenance/Table/Table.vue";
@Component({
  components: {
    Table,
  },
})
export default class Items extends Vue {
  discount = 10;
  get netAmount() {
    const amountTotal = Number(
      this.arrObjSum(this.tableItems, "invAmt").split(",").join("")
    );
    // 折扣金额
    let discountSum = (
      amountTotal -
      amountTotal * (this.discount / 100)
    ).toLocaleString();
    if (!this.ifFloat(discountSum)) {
      discountSum += ".00";
    } else if (Number(discountSum.split(".")[1]) < 10) {
      discountSum += "0";
    }
    return discountSum;
  }
  // Table
  tableHeaders = [
    {
      text: "Line #",
      value: "line",
      width: "80",
      align: "right",
    },
    {
      text: "Description",
      value: "description",
    },
    {
      text: "Unit Rate",
      value: "unitRate",
      align: "right",
    },
    {
      text: "Qty",
      value: "qty",
      align: "center",
    },
    {
      text: "Tot. Amt",
      value: "totalAmt",
      align: "right",
    },
    {
      text: "Inv%",
      value: "inv",
      align: "center",
    },
    {
      text: "Inv Amt.",
      value: "invAmt",
      align: "right",
    },
  ];
  get tableItems() {
    return this.$store.state.InvoiceStore.invoiceDetails.items;
  }
  arrObjSum(arr: object[], key: string) {
    let sum: number | string = arr.reduce((previousValue: number, item) => {
      if (isValidKey(key, item)) {
        return (
          previousValue + Number((item[key] as string).split(",").join(""))
        );
      } else {
        return previousValue;
      }
    }, 0);
    sum = sum.toLocaleString();
    if (!this.ifFloat(sum)) {
      sum += ".00";
    } else if (Number(sum.split(".")[1]) < 10) {
      sum += "0";
    }
    return sum;
  }
  arrObjAverage(arr: object[], key: string) {
    let sum: number = arr.reduce((previousValue: number, item) => {
      if (isValidKey(key, item)) {
        return (
          previousValue + Number((item[key] as string).split("%").join(""))
        );
      } else {
        return previousValue;
      }
    }, 0);
    const average = (sum / arr.length).toFixed(2) + "%";
    return average;
  }
  ifFloat(num: number | string) {
    if (typeof num === "number") {
      return String(num).split(".").length > 1;
    } else if (typeof num === "string") {
      return num.split(".").length > 1;
    } else {
      return false;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./InvoiceItems.scss";
</style>
